<template>
  <div class="page">
    <el-form
      :inline="true"
      v-if="searchVisible"
      class="query-form m-b-10"
      ref="searchForm"
      :model="searchForm"
      @keyup.enter="refreshList()"
      @submit.prevent
    >
	<div style="display: flex;justify-content: space-between;">
		<div >
			<el-form-item prop="userName" label="申请人：">
				<el-input
					v-model="searchForm.userName"
					placeholder="请输入申请人姓名"
					clearable
				></el-input>
			</el-form-item>
			<el-form-item
				label="处理结果"
				prop="status"
			>
				<el-select
					v-model="searchForm.status"
					style="width: 100%"
					placeholder="请选择"
				>
					<el-option
						v-for="status in [{value: '未处理',label: '未处理',},{value: '已拒绝',label: '已拒绝',},{value: '已同意',label: '已同意',}]"
						:key="status.value"
						:label="status.label"
						:value="status.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
		</div>
		<div >
			<!-- 搜索框-->
		<el-form-item>
			<el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
			<el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
		</el-form-item>
		</div>
	</div>
	
      
    </el-form>
		<div class="jp-table">
		  <vxe-toolbar ref="officeRequestToolbar" :refresh="{query: refreshList}">
				<template #buttons>
					<el-button v-if="hasPermission('office:request:del')" type="danger"   icon="del-filled" @click="del()" v-show="$refs.officeRequestTable && $refs.officeRequestTable.getCheckboxRecords().length > 0" plain>删除</el-button>
				</template>
				<template #tools>
					<vxe-button
					type="text"
					:title="
						searchVisible ? '收起检索' : '展开检索'
					"
					icon="vxe-icon-search"
					class="tool-btn"
					@click="searchVisible = !searchVisible"
					></vxe-button>
				</template>
		  </vxe-toolbar>
		  <div class="jp-table-body">
		  <vxe-table
				border="inner"
				auto-resize
				resizable
				height="auto"
				:loading="loading"
				size="small"
				ref="officeRequestTable"
				show-header-overflow
				show-overflow
				highlight-hover-row
				:menu-config="{}"
				:print-config="{}"
				:import-config="{
					importMethod: importMethod,
					types: ['csv', 'xls', 'xlsx'],
					remote: true,
				}"
				:export-config="{
					remote: true,
					filename: `请示稿件数据${moment(new Date()).format(
						'YYYY-MM-DD'
					)}`,
					sheetName: '请示稿件数据',
					exportMethod: exportMethod,
					types: ['xlsx'],
					modes: ['current', 'selected', 'all'],
				}"

				@sort-change="sortChangeHandle"
				:sort-config="{remote:true}"
				:data="dataList"
				:checkbox-config="{}">
				<vxe-column type="seq" width="40"></vxe-column>
				<vxe-column type="checkbox"  width="40px"></vxe-column>
    <vxe-column
		  field="userName"
		  title="发起人">
				<template  #default="{ row }">
				  <el-link  type="primary" :underline="false" v-if="hasPermission('office:request:view')"  @click="view(row.userId)">{{row.userName}}</el-link>
				  <span v-else>{{row.userName}}</span>
				</template>
		</vxe-column>
    <vxe-column
		  field="title"
		  title="标题">
		</vxe-column>
	<vxe-column
		  field="deliverTime"
		  sortable
		  title="请示时间">
		</vxe-column>
	<vxe-column
		  field="status"
		  title="处理结果">
		</vxe-column>
		<vxe-column
		  fixed="right"
		  align="center"
		  width="200"
		  title="操作">
		  <template   #default="{ row }">
		    <el-button v-if="hasPermission('office:request:view')" type="primary" text icon="view-filled" @click="view(row.id)">查看</el-button>
		    <el-button v-if="hasPermission('office:request:del')"  type="danger"  text icon="del-filled" @click="del(row.id)">删除</el-button>
		  </template>
		</vxe-column>
    </vxe-table>
    <vxe-pager
		background
		size="small"
		:current-page="tablePage.currentPage"
		:page-size="tablePage.pageSize"
		:total="tablePage.total"
		:page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
		:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
		@page-change="currentChangeHandle">
    </vxe-pager>
    </div>
    </div>
		  <!-- 弹窗, 新增 / 修改 -->
    <OfficeRequestForm  ref="officeRequestForm" @refreshDataList="refreshList"></OfficeRequestForm>
  </div>
</template>

<script>
  import officeRecordService from '@/api/organization/officeRecordService'
import OfficeRequestForm from './OfficeRequestForm'
  import officeRequestService from '@/api/organization/officeRequestService.js'
  export default {
    data () {
		return {
		  searchVisible: true,
		  searchForm: {
			userName:"",
			approverId:"",
			status:""
		  },
		  dataList: [],
		  tablePage: {
		    total: 0,
		    currentPage: 1,
		    pageSize: 10,
		    orders: [{ column: "deliver_time", asc: false }],
		  },
		  loading: false
		}
    },
    components: {
		OfficeRequestForm
    },
    created () {
    },    
    mounted () {
		this.$nextTick(() => {
		  // 将表格和工具栏进行关联
		  const $table = this.$refs.officeRequestTable
		  const $toolbar = this.$refs.officeRequestToolbar
		  $table.connect($toolbar)
		})
    }, 
    activated () {
		this.refreshList()
    },
    methods: {
		currentUser() {
			var userInfo = this.$TOOL.data.get("USER_INFO");
			return userInfo;
		},
		// 获取数据列表
		refreshList () {
			var user=this.currentUser()
		  this.loading = true
		  if(this.searchForm.status==''){
			this.searchForm.status="未处理"
		  }
		  this.searchForm.approverId=user.id
		  officeRequestService.page({
		    'current': this.tablePage.currentPage,
		    'size': this.tablePage.pageSize,
		    'orders': this.tablePage.orders,
		    ...this.searchForm
		  }).then((data) => {
		    this.dataList = data.records
		    this.tablePage.total = data.total
		    this.loading = false
		  })
		},
		// 当前页
		currentChangeHandle ({ currentPage, pageSize }) {
		  this.tablePage.currentPage = currentPage
		  this.tablePage.pageSize = pageSize
		  this.refreshList()
		},
		// 排序
    sortChangeHandle(obj) {
		  this.tablePage.orders = [];
		  if (obj.order != null) {
		    this.tablePage.orders = [{ column: obj.column.sortBy || this.$utils.toLine(obj.property), asc: obj.order === "asc" }];
		  } else {
		    this.tablePage.orders = [{ column: "deliver_time", asc: false }];
		  }
		  this.refreshList();
		},
		// 新增
		add () {
		  this.$refs.officeRequestForm.init('add', '')
		},
		// 修改
		edit (id) {
		  id = id || this.$refs.officeRequestTable.getCheckboxRecords().map(item => {
		    return item.id
		  })[0]
		  this.$refs.officeRequestForm.init('edit', id)
		},
		// 查看
		view (id) {
		  this.$refs.officeRequestForm.init('view', id)
		},
		// 删除
		del (id) {
		  let ids = id || this.$refs.officeRequestTable.getCheckboxRecords().map(item => {
		    return item.id
		  }).join(',')
		  this.$confirm(`确定删除所选项吗?`, '提示', {
		    confirmButtonText: '确定',
		    cancelButtonText: '取消',
		    type: 'warning'
		  }).then(() => {
		    this.loading = true
		    officeRecordService.delete(ids).then((data) => {
				this.$message.success(data)
				this.refreshList()
				this.loading = false
		    })
		  })
		},
		resetSearch () {
		  this.$refs.searchForm.resetFields()
		  this.refreshList()
		}
    }
  }
</script>

